<template>
	<div class="finance-receipt">
		<v-dialog title="新建应收" :show.sync="dialogVisible" width="1200px" @beforeClose="beforeClose" :close-on-click-modal="false">
			<div class="card-box">
				<div class="card-title">基本信息</div>
				<el-form ref="receiptForm" :model="financeForm" class="form-wrap" size="small" :rules="rules" label-position="top">
					<el-form-item label="收款项目" prop="chargeProjectName">
						<el-select v-model="financeForm.chargeProjectName" @change="selectOne" placeholder="请选择">
							<el-option v-for="item in chargeProjectType" :key="item.label" :label="item.label" :value="item"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div class="card-title">调整列表</div>
				<el-table :data="tableData" align="center">
					<el-table-column label="费用周期" align="center" prop="costPeriodStart" width="200">
						<template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
					</el-table-column>
					<el-table-column label="收款项目" width="100" align="center" prop="chargeProjectName"></el-table-column>
					<el-table-column label="合同应收金额" align="center" prop="receivableMoneyOld" width="100"></el-table-column>
					<el-table-column label="应收调整金额(元)" align="center" prop="adjustmentAmount" width="100"></el-table-column>
					<el-table-column label="本月应收金额(元)" align="center" prop="receivableMoney" width="100"></el-table-column>
				</el-table>
			</div>
			<span slot="foot">
        <el-button v-throttle="[commitReview]">提交</el-button>
      </span>
		</v-dialog>
	</div>
</template>

<script>
	import {getReceiptAdjustment, updateReceivableById} from '../../api/collection.js'
	import BaseLoad from '@/assets/vue-mixin/BaseLoad'
export default {
  name: "receipt-adjustment",
	created() {
  	this.chargeProjectType = this.getDict('charge_project_type')
	},
	mixins: [BaseLoad],
	data() {
  	return {
			dialogVisible: false,
			financeForm: {
				receivableIds: [],
				chargeProjectId: '',
				chargeProjectName: '',
			},
			tableData: [],
			chargeProjectType: [],
			rules: {
				chargeProjectName: [{ required: true, message: '请选择收费项目', trigger: 'blur' }]
			}
		}
	},
	methods: {
		receiptOpen(item) {
			this.loadAction('数据加载中,请稍等...')
			let obj = {
				receivableStatus: '01',
				rentContractId: item[0].rentContractId
			}
			getReceiptAdjustment(obj).then(res =>{
				if (res.data.code === 0 && res.data.data) {
					this.tableData = res.data.data
					this.dialogVisible = true
					this.loadClose()
				} else {
					this.$message.warning('暂无数据！')
					this.dialogVisible = true
				}
			})
		},
		//选择收款项目
		selectOne(item) {
			this.financeForm.chargeProjectId = item.value
			this.financeForm.chargeProjectName = item.label
		},
		//关闭弹框
		beforeClose(done) {
			done()
			this.$emit('beforeClose')
		},
		//提交
		commitReview() {
			this.$refs.receiptForm.validate(valid => {
				if (valid) {
					this.tableData.map(it => {
						this.financeForm.receivableIds.push(it.receivableId)
					})
					updateReceivableById(this.financeForm).then(res =>{
						if (res.data.code === 0) {
							this.$message.success(`提交成功!`);
							this.dialogVisible = false;
							this.$emit('resetList')
						} else {
							this.$message.error(res.data.msg)
						}
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
	@include formWrap(3);
</style>
